<template>
	<view class="page-container">
		<view 
			class="head-wrapper" 
			:style="{ paddingTop: statusBarHeight + 'px' ,height:naviagteHeight+'px'}"
			:class="pageScrollHeight>=headerScrollHeight?'head-wrapper-scroll':''"
		>
			<view class="head-menu">
				<view class='iconfont icon-fanhui2' @click="returns"></view>
				<view class="iconfont icon-gengduo5" @click="showNav"></view>
			</view>
		</view>
		<view class="dialog_nav" v-show="currentPage" :style="{ top: navH + 'rpx' }">
			<view class="dialog_nav_item" :class="item.after" v-for="(item,index) in selectNavList" :key="index"
				@click="linkPage(item.url)">
				<text class="iconfont" :class="item.icon"></text>
				<text class="pl-20">{{item.name}}</text>
			</view>
		</view>
		<view class="shop-back" :style="{backgroundImage:`url(${shopDetail.mer_banner})`}">
			
		</view>
		<view class="shop-card">
			<view class="shop-info flex" @click="onShopCard">
				<view>
					<view class="title">{{shopDetail.mer_name}}</view>
					<view class="flex sale-info">
						<span class="score text-small">{{score}}分</span>
						<span class="sales text-small">月售{{shopDetail.sales}}</span>
					</view>
				</view>
				<view class="shop-logo">
					<image :src="shopDetail.mer_avatar" mode="widthFix" class="image"></image>
				</view>
			</view>
			<view class="state" :class="shopDetail.status?'':'state-active'">
				{{shopDetail.status?"营业中":"歇业中"}}
			</view>
			<view class="announcement text-small">公告：{{shopDetail.mer_info}}</view>
			<view class="preferential-container" v-if="coupon.length>0">
				<view class="preferential-list">
					<view class="preferential-item" v-for="item in coupon.slice(0,3)" :key="item.coupon_id">
						{{ item.title }}
					</view>
				</view>
				<view class="iocn-container">
					{{coupon.length}}种优惠
					<view class="iconfont2 icon-xiangxiazhankai bottom-icon"></view>
				</view>
			</view>
		</view>
		<view class="tabs-box flex">
			<view class="tabs-item" v-for="item in tabsList" :key="item.id" @click="onTabs(item)">
				<div class="tabs-title" :class="item.id == tabsActiveId?'active-title':''">
					{{item.title}}
				</div>
				<div class="active-box" v-if="item.id == tabsActiveId">
					
				</div>
			</view>
		</view>
		<view class="goods-container" :style="{height:`calc( 100vh - ${ naviagteHeight }px - 80rpx )`}">
			<Goodslist v-if="tabsActiveId == 0" :list="classList" />
			<Comments v-if="tabsActiveId == 1" :id="this.shopId" />
			<Brand v-if="tabsActiveId == 2" :detail="shopDetail"/>
		</view>
		<view class="settlement-container flex">
			<view class="settlemen-icon-container" :class="amount>0?'active':''" @click="openCarPopup">
				<view class="iconfont2 icon-goodsmanagement settlemen-icon"></view>
			</view>
			<view class="settlemen-info">
				<view class="price">
					<span class="money-tags">￥</span>
					<span>{{amount}}</span>
				</view>
				<view class="">
					免配送费
				</view>
			</view>
			<button class="settlemen-button" @click="settlement" :class="amount>0?'active':''">去结算</button>
		</view>
	</view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
let app = getApp();

import { getGoodsList,getGoodsClassList,getShopDetail,getShopYh } from '@/api/localLife/shopDetail.js'

import Goodslist from '../component/goodsList.vue'
import Comments from '../component/comments.vue';
import Brand from '../component/brand.vue'
export default{
	components:{Goodslist,Brand,Comments},
	data(){
		return {
			tabsList:[
				{
					id:0,
					title:"商品"
				},{
					id:1,
					title:"评论"
				},{
					id:2,
					title:"品牌"
				},
			],
			// 菜单
			currentPage:false,
			//菜单高
			navH: 0,
			selectNavList: [
				{
					name: '首页',
					icon: 'icon-shouye8',
					url: '/pages/index/index',
					after: 'dialog_after'
				},
				{
					name: '搜索',
					icon: 'icon-sousuo6',
					url: '/pages/columnGoods/goods_search_con/index',
					after: 'dialog_after'
				},
				{
					name: '购物车',
					icon: 'icon-gouwuche7',
					url: '/pages/order_addcart/order_addcart',
					after: 'dialog_after'
				},
				{
					name: '我的收藏',
					icon: 'icon-shoucang3',
					url: '/pages/users/user_goods_collection/index',
					after: 'dialog_after'
				},
				{
					name: '个人中心',
					icon: 'icon-gerenzhongxin1',
					url: '/pages/user/index'
				},
			],
			// 页面滚动距离
			pageScrollHeight:0,
			// 页面激活参数
				// tabs
			tabsActiveId:0,
			// 状态栏高度
			statusBarHeight:statusBarHeight,
			// 导航栏高度 px
			naviagteHeight:47,
			// 页面滚动超出距离 px
			headerScrollHeight:100,
			// 商家信息
			shopId:0,
			// 商品请求筛选对象
			form:{},
			// 全部分类列表
			allClassList:[],
			// 全部商品列表
			allGoodsList:[],
			// 当前商家分类列表
			classList:[],
			// 商家详情
			shopDetail:{},
			// 当前选中商品总额
			amount:0,
			// 优惠列表
			coupon:[]
		}
	},
	onLoad(options){
		// #ifdef MP-WEIXIN
			const info = uni.getMenuButtonBoundingClientRect()
			// 边距
			const padding = info.top - this.statusBarHeight;
			this.naviagteHeight = info.height + padding*2 + this.statusBarHeight
		// #endif
		this.navH = app.globalData.navHeight+10;
		if(options.id){
			this.shopId = options.id
		}
	},
	onShow() {
		
	},
	created() {
		this.init()
	},
	onPageScroll(res) {
		// console.log(res)
		this.pageScrollHeight = res.scrollTop
	},
	computed:{
		score(){
			if(!this.shopDetail.product_score){
				return 0
			}
			return ((this.shopDetail.product_score * 1 + this.shopDetail.service_score * 1 + this.shopDetail.postage_score * 1 ) /5).toFixed(1)
		}
	},
	watch:{
		classList:{
			handler(classList){
				if(classList.length==0){
					return 0
				}
				let am = 0
				classList.forEach((item)=>{
					const all = item.list.reduce((sum,item)=>{
						if(item.num){
							return item.num * (item.price*100) + sum
						}else{
							return sum
						}
					},0)
					am += all
				})
				this.amount = (am / 100).toFixed(2);
			},
			deep:true
		}
	},
	methods:{
		async init(){
			const goodsRes = await getGoodsList(this.shopId,this.form)
			this.allGoodsList = goodsRes.data.list
			
			const classRes = await getGoodsClassList()
			this.allClassList = classRes.data;
			
			this.toGetShopDetail()
			this.toGetShopYh();
			
			this.allGoodsList.forEach((item)=>{
				this.judgmentClassName(item,this.allClassList)
			})
		},
		toGetShopDetail(){
			getShopDetail(this.shopId).then((res)=>{
				this.shopDetail = res.data
			})
		},
		// 商家优惠信息
		toGetShopYh(){
			console.log("优惠")
			
			getShopYh(this.shopId).then(res=>{
				this.coupon = res.data
			})
		},
		settlement(){
			console.log(this.classList)
		},
		// 判断分类名称
		judgmentClassName(goodsItem,arr){
			arr.forEach((classItem)=>{
				// console.log(classItem.value,goodsItem.cate_id,)
				if(goodsItem.cate_id == classItem.value){
					const index = this.classList.findIndex((item)=>{
						return item.id == goodsItem.cate_id
					})
					if(index>=0){
						this.classList[index].list.push(goodsItem)
					}else{
						this.classList.push({
							id:classItem.value,
							title:classItem.label,
							list:[goodsItem]
						})
					}
				}else{
					if(!(classItem.children==undefined)){
						this.judgmentClassName(goodsItem,classItem.children)
					}
				}
			})
		},
		onTabs(item){
			this.tabsActiveId = item.id
		},
		onShopCard(){
			
		},
		openCarPopup(){
			this.$refs.carListRef.open();
		},
		returns(){
			uni.navigateBack()
		},
		showNav(){
			this.currentPage = !this.currentPage
		},
		//下拉导航页面跳转
		linkPage(url) {
			if (['/pages/index/index', '/pages/order_addcart/order_addcart',
					'/pages/user/index', '/pages/plant_grass/index'
				].indexOf(url) > -1) {
				uni.switchTab({
					url
				})
			} else {
				uni.navigateTo({
					url
				})
			}
			this.currentPage = false
		},
	}
}
</script>

<style lang="scss" scoped>
.page-container{
	background-color: white;
	position: relative;
}
.head-wrapper {
	z-index: 99;
	display: flex;
	align-items: center;
	position: fixed;
	left: 0rpx;
	right: 0rpx;
	top: 0;
	display: flex;
	align-items: center;
	padding:0 30rpx;
}
.head-wrapper-scroll{
	background-color: white;
	.head-menu{
		border:none;
	}
}
.head-menu {
	display: flex;
	align-items: center;
	height: 58rpx;
	width: 158rpx;
	background: rgba(255,255,255,0.302);
	border: 2rpx solid rgba(0,0,0,0.0588);
	border-radius: 29rpx;
	.iconfont {
		flex: 1;
		text-align: center;
		color: #000000;
		box-sizing: border-box;
		&.icon-fanhui2 {
			border-right: 1px solid rgba(0,0,0,0.2);;
		}
	}
}
.dialog_nav{
	position: absolute;
	position: fixed;
	
}

.image{
	height: 100%;
	width: 100%;
}
.flex{
	display: flex;
}
.text-small{
			font-size: 24rpx;
		}

.shop-back{
	width: 100%;
	height: 420rpx;
	overflow: hidden;
	background:center url("@/pages/plantGrass/static/images/plant_bg.jpg") no-repeat;
	background-size: auto 100%;
}
.shop-card{
	background-color: white;
	border-radius: 12rpx;
	padding: 18rpx 20rpx;
	margin: 0 20rpx;
	margin-top: -40rpx;
	box-shadow: 0rpx 10rpx 10rpx #f3f3f3;
	.shop-info{
		justify-content: space-between;
		.sale-info{
			margin-top: 8rpx;
		}
		.title{
			font-size: 40rpx;
			font-weight: bold;
			color: black;
		}
		
		.score{
			color: rgb(250, 110, 14);
			font-weight: bold;
		}
		.sales{
			color: #999999;
			margin-left: 8rpx;
		}
		.shop-logo{
			width: 100rpx;
			height: 100rpx;
		}
	}
	.state{
		font-size: 28rpx;
		color: #18b566;
	}
	.state-active{
		color: #dd6161;
	}
	.announcement{
		margin-top: 8rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		color: #999999;
	}
	.preferential-container{
		display: flex;
		justify-content: space-between;
		margin-top: 12rpx;
		.preferential-list{
			font-size: 22rpx;
			display: flex;
			.preferential-item{
				border-radius: 4rpx;
				border:1rpx solid #f9643d ;
				color: #f9643d;
				padding: 2rpx 4rpx;
			}
		}
		.iocn-container{
			display: flex;
			font-size: 24rpx;
			color: #999999;
		}
	}
}

.tabs-box{
	height: 80rpx;
	position: sticky;
	margin-top: 16rpx;
	padding:0rpx 40rpx 0 40rpx;
	background-color: white;
	padding-top: 20rpx;
	box-sizing: border-box;
	.tabs-item{
		margin-right:50rpx;
		.active-box{
			height: 8rpx;
			width: 32rpx;
			background-color: rgb(1, 180, 253);
			border-radius: 12rpx;
			margin: auto;
			margin-top: 6rpx;
		}
		.active-title{
			font-weight: bold;
		}
	}
}
.goods-container{
	background-color: #f3f3f3;
}

.settlement-container{
	position: fixed;
	z-index: 99;
	background-color: #f9f9f9;
	top: 100%;
	transform: translate(0,-100%);
	right: 0;
	left: 0;
	padding: 16rpx 20rpx;
	.settlemen-icon-container{
		padding: 8rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #c8c8c8;
		.settlemen-icon{
			color: rgb(248, 248, 248);
			font-size: 46rpx;
			text-align: center;
			line-height: 60rpx;
			// margin: auto;
		}
	}
	.settlemen-info{
		flex-grow: 1;
		padding: 0 12rpx;
		font-size: 22rpx;
		.price{
			font-size: 36rpx;
			.money-tags{
				font-size: 26rpx;
			}
		}
	}
	.settlemen-button{
		background-color: #c8c8c8;
		color: white;
		padding: 0 60rpx;
		border-radius: 60rpx;
		line-height: 74rpx;
	}
	
	.active{
		background-color: #18b566;
	}
	
}

.detail-popup{
	background-color: white;
	width: 100%;
}
</style>